<template>
  <div>
      <div style="width: 100%;height:560px;">
          <rm-layout-top splitcolor="#FFFFFF" :splitwidth=5 :fixsize=95>
              <template v-slot:fix>
                  <table style="width: 100%">
                      <tr>
                          <td style="width: 60px; text-align: left">标本日期</td>
                          <td style="width: 140px">
                              <el-date-picker v-model="sampledate1" :clearable="false" style="width: 100%"></el-date-picker>
                          </td>
                          <td style="width: 30px; text-align: center;">至</td>
                          <td style="width: 150px">
                              <el-date-picker v-model="sampledate2" :clearable="false" style="width: 100%"></el-date-picker>
                          </td>
                          <td style="width: 60px; text-align: left">病人来源</td>
                          <td>
                              <el-select v-model="pattype" @dblclick.native="popMultipleChk(pattype, 'pattype', pattypeOption, '病人类型选择')" filterable clearable style="width: 200px">
                                  <el-option v-for="(item, index) in pattypeOption" :value="item.data" :label="item.display" :key="index"></el-option>
                              </el-select>
                          </td>
                      </tr>
                      <tr>
                          <td style="width: 60px; text-align: left">标本号</td>
                          <td colspan="3">
                              <el-input v-model="sampleno" style="width: 100%" placeholder="标本号可以输入如：1,2,5-8等格式"></el-input>
                          </td>
                          <td>
                              <el-checkbox v-model="beforecheck" false-label="0" true-label="1">审核前</el-checkbox>
                          </td>
                          <td>
                              <el-checkbox v-model="aftercheck" false-label="0" true-label="1">审核后</el-checkbox>
                          </td>
                      </tr>
                      <tr>
                          <td style="width: 60px; text-align: left">报告单元</td>
                          <td colspan="3">
                              <rm-ddl-rptunit prgno="LIS310" v-model="rptunitid" width="100%" :clearable="true" @change="rptunitChange"></rm-ddl-rptunit>
                          </td>
                          <td colspan="2" style="text-align: right">
                              <el-button @click="QueryExportData()">查询</el-button>
                              <el-button @click="ExportFile()">导出</el-button>
                              <el-button @click="ExportCancel()">退出</el-button>
                          </td>
                      </tr>
                  </table>
              </template>
              <div style="width: 100%">
                  <div style="height: 435px;">
                      <el-tabs style="height: 100%" type="border-card" v-model="tab_showflag">
                          <el-tab-pane label="数据" name="tab_data">
                              <div style="width: 100%;height:400px;">
                                  <vxe-table ref="xTable" :data="tableData" :loading="loading" :keyboard-config="keyConfig" :sort-config="{ trigger: 'cell' }" border fit height="auto" header-align="center" resizable show-overflow="tooltip" size="mini" stripe highlight-current-row >
                                      <vxe-table-column field="sampleno" title="样本编号" width="100px" align="center" sortable></vxe-table-column>
                                      <vxe-table-column field="specimenname" title="样本类型" width="80px" align="center" sortable></vxe-table-column>
                                      <vxe-table-column field="hospname" title="送检医院" width="120px" sortable></vxe-table-column>
                                      <vxe-table-column field="sampledate" title="样本日期" width="120px" align="center" :formatter="['toDateString', 'yyyy-MM-dd']" sortable></vxe-table-column>
                                      <vxe-table-column field="pat_name" title="姓名" width="100px" sortable></vxe-table-column>
                                      <vxe-table-column :field="items.field" :key="items.field" :title="items.title" sortable v-for="items in tableColumn" :width="items.width" :align="items.align" header-align="center"></vxe-table-column>
                                      <vxe-table-column field="pat_diag" title="临床诊断" width="100px" sortable></vxe-table-column>
                                      <vxe-table-column field="req_reason" title="送检目的" width="160px" align="center" sortable></vxe-table-column>
                                  </vxe-table>
                              </div>
                          </el-tab-pane>
                      </el-tabs>
                  </div>
              </div>
          </rm-layout-top>
      </div>
      <!--多选弹窗--->
      <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="dlgTitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
          <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"> </rm-SqlMultiple>
      </el-dialog>
  </div>
</template>
<script>
import XE from "xe-utils";
export default {
  props: ["linkrptunitid", "linkrptunitname", "rpattypeOption", "sampledate"],
  data() {
      return {
          sampledate1: this.sampledate,
          sampledate2: this.sampledate,
          sampleno: "",
          pattype: "",
          beforecheck: "1",
          aftercheck: "1",
          pattypeOption: this.rpattypeOption,
          tab_showflag: "tab_data",
          //项目结果输出弹窗
          tableData: [],
          loading: false,
          keyConfig: {
              isArrow: true,
              isDel: true,
              isTab: true,
              isEdit: true,
          },
          dialogMultipleVisible: false,
          dlgTitle: "",
          option1: [],
          option2: [],
          fieldname: "",
          rptunitid: this.linkrptunitid,
          rptunitname: this.linkrptunitname,
          tableColumn: [],
      };
  },
  created() {
  },
  methods: {
      QueryExportData() {
          this.loading = true;
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS310",
                  method: "post",
                  data: {
                      action: "querylinkitemdata",
                      sampledate1: this.sampledate1,
                      sampledate2: this.sampledate2,
                      sampleno: this.sampleno,
                      pattype: this.pattype,
                      beforecheck: this.beforecheck,
                      aftercheck: this.aftercheck,
                      rptunitid: this.rptunitid,
                  }
              })
              .then(res => {
                  console.log(res.RData);
                  this.loading = false;
                  if(res.Data) {
                      this.tableColumn = res.RData.Cols;
                      this.tableData = res.Data;
                  } else {
                      this.tableColumn = [];
                      this.tableData = [];
                  }
              });
      },
      rptunitChange(code, name) {
          this.rptunitid = code;
          this.rptunitname = name;
      },
      ExportFile() {
          let tableColumn = this.$refs.xTable.getColumns();
          let extableColumn = [];
          tableColumn.forEach((item) => {
              extableColumn.push({ title: item.title, field: item.property });
          });
          let filtertxt = this.getExportFilter();
          this.$pub.exportTableExcel(this.$refs.xTable.afterFullData, extableColumn, "LIS310报告处理_关联项目结果_" + XE.toDateString(this.sampledate1, "yyyyMMdd") +".xlsx", filtertxt);
      },
      getExportFilter() {
          let filtertxt = "标本日期:" + XE.toDateString(this.sampledate1, "yyyy-MM-dd") + "至" + XE.toDateString(this.sampledate2, "yyyy-MM-dd") + "; ";
          if(this.pattype) filtertxt += "病人来源:" + this.getOptionName(this.pattypeOption.filter((item) =>  ("," + this.pattype + ",").indexOf("," + item.data + ",") > -1)) + "; ";
          if(this.sampleno) filtertxt += "标本号:" + this.sampleno + "; ";
          if(this.beforecheck == "1") filtertxt += "审核前; ";
          if(this.aftercheck == "1") filtertxt += "审核后; ";
          if(this.rptunitid) filtertxt += "报告单元:" + this.rptunitname + "; ";
          return filtertxt;
      },
      getOptionName(option) {
          if (option && option.length > 0) {
              let optionname = "";
              option.forEach((item) => {
                  if(item.hasOwnProperty("display")) {
                      optionname += item.display + ",";
                  } else {
                      optionname += item.label + ",";
                  }
              });
              return optionname.substring(0, optionname.length - 1);
          } else {
              return "";
          }
      },
      ExportCancel() {
          this.$emit("cancel");
      },
      //多选弹窗
      popMultipleChk(e, fieldname, option, title) {
          let temp = XE.clone(option, true);
          this.option1 = [];
          this.option2 = [];
          if (e != "") {
              let k = e.split(",");
              k.forEach((item) => {
                  let ndata = temp.find((m) => m.data == item);
                  if (ndata != undefined && ndata != null) {
                      this.option2.push(ndata);
                  }
              });
              temp.forEach((item) => {
                  if (k.indexOf(item.data + "") < 0) {
                      this.option1.push(item);
                  }
              });
          } else {
              this.option1 = temp;
          }
          this.fieldname = fieldname;
          this.dlgTitle = title;
          this.dialogMultipleVisible = true;
      },
      closedialog(value, name) {
          if (value != "close") {
              this[name] = value;
          }
          this.dialogMultipleVisible = false;
      },
  },
}
</script>
<style scoped>
</style>